<template>
	<view>
		<!-- 楼层装修店铺信息 -->
		<div>
			<u-navbar :border-bottom="false">
				<u-search v-model="keyword" @search="search" @click="search" @custom="search" placeholder="请输入搜索"></u-search>
			</u-navbar>
			<div class="wrapper" v-if="publicWeb.merchant_display">
				<!-- 店铺信息模块 -->
				<div class="store flex">
					<u-image border-radius="10" width="150" height="150" :src="storeInfo.merchant_img || config.logo"
						mode="aspectFill">
					</u-image>
					<div class="flex-1 flex align-center justify-between ml-2" @click="getStoreLicencePhoto">
						<div class="fs-32 font-weight-bold ">
							<text>{{ storeInfo.merchant_name || "" }}</text>
						</div>
						<uni-icons style="margin-left: 10rpx" type="right" size="25"></uni-icons>

					</div>
				</div>
				<!-- #ifndef H5 -->
				<div class=" fs-24 mt-2 ft666666 flex align-center" @tap="openBuiltInMap()">
					<uni-icons type="location" size="20"></uni-icons>
					{{ storeInfo.detail_address || '' }}
				</div>
				<!--#endif-->
			</div>
			<div class="goods-list mt-2">
				<view class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index"
					@click="navTo(`/pages/product/product?id=${item.id}&goodsId=${item.id}`)">
					<view class="goods-img">
						<u-image v-if="item.main_image" :src="item.main_image" height="350rpx" mode="aspectFill" width="100%">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<u-image v-else src="/static/logo.png" height="350rpx" mode="aspectFill" width="100%">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="goods-desc">
						<view class="goods-title">
							{{ item.goods_name }}
						</view>
						<view class="goods-bottom">
							<view class="goods-price">
								¥<span>{{item.day_amount}}</span>
							</view>
						</view>
					</view>
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	// 引用组件
	import goodsTemplate from '@/components/m-goods-list/list'
	import {
		merchantManageauditStatus
	} from "@/api/entry";
	import config from "@/config/config";
	import {
		getGoodsList,
		merchantDetail
	} from "@/api/goods.js";
	export default {
		data() {
			return {
				config,
				pageData: "", //楼层页面数据
				enablePageData: false, //是否显示楼层装修内容
				basePageData: false, //基础店铺信息
				scrollTop: 0,
				mainColor: this.$mainColor, //主色调
				current: 0, //初始tabs的索引
				tabs: [{
						name: "全部商品",
					},
					{
						name: "分类查看",
					},
				], // 标签
				storeId: "",
				keyword: "",
				storeInfo: {}, //店铺详情
				isCollection: false, //是否关注
				goodsList: [], //推荐货物
				couponList: [], //优惠券列表
				categoryList: [],
				goodsParams: {
					page: 1,
					limit: 100,
					merchant_id: "",
				},
				tempList: [],
				publicWeb: {}
			};
		},
		components: {
			goodsTemplate
		},
		/**
		 * 加载
		 */
		async onLoad(options) {
			this.storeId = options.id;
			console.log(this.storeId, 'this.storeId')
			this.goodsParams.merchant_id = options.id;
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.init();
		},
		mounted() {
			this.publicWeb = uni.getStorageSync('publicWeb') || {}
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true,
			});
			// #endif
			this.init();
		},

		// 下拉加载
		onReachBottom() {
			if (!this.tempList.length) return;
			this.goodsParams.page++;
			this.getGoodsData();
		},

		methods: {
			openBuiltInMap() {
				uni.openLocation({
					// 目标经纬度（必填）
					latitude: Number(this.storeInfo.latitude),
					longitude: Number(this.storeInfo.longitude),
					// 目标名称（显示在地图上）
					name: this.storeInfo.merchant_name,
					// 详细地址（点击气泡时显示）
					address: `${this.storeInfo.detail_address}`,
					// 缩放级别（1-28，默认16）
					scale: 16,
					success: () => {
						console.log("打开内置地图成功");
					},
					fail: (err) => {
						console.error("打开地图失败：", err);
						uni.showToast({
							title: "导航失败，请重试",
							icon: "none"
						});
					}
				});
			},
			talk() {

			},
			getStoreLicencePhoto() {
				uni.navigateTo({
					url: `/pages/product/licencePhoto?id=${this.storeId}`,
				});
			},
			/**
			 * 初始化信息
			 */
			init() {
				this.goodsList = [];
				this.categoryList = [];
				this.couponList = [];
				this.goodsParams.page = 1;
				// 店铺信息
				this.getStoreData();
			},
			/**商品分类中商品集合 */
			getCategoryGoodsList(val) {
				uni.navigateTo({
					url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
				});
			},

			/**
			 * 搜索
			 */
			search() {
				console.log('search------')
				uni.navigateTo({
					url: `/pages/navigation/searchPage?storeId=${this.storeId}&keyword=${this.keyword}`,
				});
			},
			/**
			 * 店铺信息
			 */
			async getStoreData() {
				let res = await merchantDetail({
					id: this.storeId
				});
				if (res.code === 1) {
					this.storeInfo = res.data.merchant;
					this.getGoodsData();
				}
			},

			/** 加载商品 */
			async getGoodsData() {
				let res = await getGoodsList(this.goodsParams);
				if (res.code === 1) {
					this.tempList = res.data.list
					if (this.goodsParams.page === 1) {
						this.goodsList = res.data.list
					} else {
						this.goodsList = this.goodsList.concat(res.data.list)
					}

					console.log(this.goodsList)
				}
			},

			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	$w_94: 94%;

	.wrapper {
		background: #fff;
		padding: 32rpx;
	}

	.store {
		align-items: center;

		>.box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 30rpx;
			font-size: 24rpx;
			color: #999;
			flex: 2;

			>.store-name {
				font-size: 34rpx;
				color: #333;
				letter-spacing: 1rpx;
				font-weight: bold;
			}

			>.store-message {
				margin-top: 25rpx;

				>div {
					font-size: 26rpx;
					margin: 0 5rpx;

					>span {
						font-size: 26rpx;
						font-weight: bold;
						color: #333;
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.collection-btn {
		background: $main-color;
		padding: 6rpx 0;
		width: 140rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 100px;
		text-align: center;
	}

	.store-desc {
		margin: 40rpx 0 0 0;
		color: #999;
	}

	.kefu {
		background: #f7f7f7;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.goods-item {
			width: 50%;
			margin-bottom: 10px;
			border-radius: 0.4em;
			overflow: hidden;
		}

		.goods-img {
			position: relative;
			margin: 0 auto;
			// width: 158px;
			width: $w_94;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.goods-desc {
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			width: $w_94;
			background: #fff;
			padding: 8rpx 0 8rpx 8rpx;
			margin: 0 auto;

			>.goods-title {
				font-size: 24rpx;
				height: 67rpx;
				display: -webkit-box;
				font-weight: 500;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			>.goods-bottom {
				display: flex;
				font-weight: bold;

				>.goods-price {
					line-height: 2;
					color: $main-color;

					>span {
						font-size: 42rpx;
					}
				}
			}
		}
	}
</style>